<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <!-- <Child :message = 'msg'></Child> -->
    <!-- <p>{{from}}</p>
    <Child2 @sub="Childsub"></Child2> -->

    <!-- <div class="page">
      <lefts></lefts>
    <rights></rights>
    </div>
  </div> -->

  <div class="page">
    <Lefts></Lefts>
    <Rights></Rights>
  </div>
  </div>
</template>

<script>
// import Child from './components/Child.vue'
// import Child2 from './components/Child2.vue'
// import rights from "./components/eventBus/rights.vue";
// import lefts from "./components/eventBus/lefts.vue";
import Rights from "./components/vuex/Rights.vue";
import Lefts from "./components/vuex/Lefts.vue";

export default {
  name: "App",
  data() {
    return {
      // msg: 'App给child准备的数据',
      from: "",
      fromLeft: ''
    };
  },
  components: {
   Rights,
   Lefts
  },
  methods: {
    Childsub(e) {
      console.log(e);
      this.from = e;
    },
    leftSub(e) {
      console.log(e);
      this.fromLeft = e
    }
  },
};
</script>

<style>

.page{
  display: flex;
  text-align: center;
  font-size: 20px;
}
.page div {
  flex: 1;
  border: 1px solid #000;
  min-height: 400px;
}
</style>
